<script lang="ts" setup>
import {
  type CertificationProps, getCertificationF9
} from '../../../apis';
import { INIT_PARAMS, PAGE_SIZE } from '../../../constants';
import { useF9Context } from '../../../use/use-context';
import { useTable } from '../use/useCertificationTable';
import PageHeader from '../../../components/page-header.vue';

interface Props {
  /** 标题名称 */
  title: string;
  /** 标题 id */
  menuId: string;
  /** 数值 */
  count: number;
}

const { title, menuId, count } = defineProps<Props>();

let pageNum = $ref(1);

const { companyId } = useF9Context();

const requestParams = reactive<CertificationProps>({
  companyId,
  ...INIT_PARAMS
});

const {
  data: tableData,
  run,
  loading,
  error
} = useRequest(getCertificationF9, {
  defaultParams: [{ ...requestParams, pageNum }]
});

const { columns } = useTable();

/** 翻页点击 */
const handleCurrentChange = (data) => {
  pageNum = data;
  run({ ...requestParams, pageNum });
};

const sortChange = (data) => {
  requestParams.sortRule = data.order ? data.field + ':' + data.order : '';
};

watch(
  () => requestParams,
  (val) => {
    pageNum = 1;
    run({ ...val, pageNum });
  },
  {
    deep: true
  }
);
</script>

<template>
  <page-header class="mt-18px mb-15px" :count="count" :title="title" :menuId="menuId" is-small />
  <vc-empty-fail @click="run({...requestParams, pageNum})" v-if="error" />
  <div class="container" v-else>
    <vc-table
      :loading="loading"
      :tableData="tableData?.items"
      :columns="columns"
      :total="tableData?.total"
      :pageSize="PAGE_SIZE"
      v-model:pageNum="pageNum"
      @page-change="handleCurrentChange"
      @sort-change="sortChange"
    />
  </div>
</template>
